<template>
	<view>
		
		<scroll-view scroll-y class="scrollPage">
			<view class="UCenter-bg">
			
				<image :src="user_info.avatar" class="cu-avatar round"></image>
				<view class="text-xl">
				 <view class="margin-top-sm"><text class="text-green text-bold">{{user_info.username}}</text></view>
				</view>
				
				<view class="margin-top-sm"><text class="text-green text-bold">{{user_info.nickname}}</text></view>
				<image src="https://image.weilanwl.com/gif/wave.gif" mode="scaleToFill" class="gif-wave"></image>
			</view>
			
			
			<view class="padding flex text-center text-grey bg-white shadow-warp">
				<view class="flex flex-sub flex-direction solid-right">
					<view class="text-xxl text-orange">{{ starCount }}</view>
					<view class="margin-top-sm">
						<text class="icon-attentionfill"></text>
						预定
					</view>
				</view>
				<view class="flex flex-sub flex-direction solid-right">
					<view class="text-xxl text-blue">{{ forksCount }}</view>
					<view class="margin-top-sm">
						<text class="icon-favorfill"></text>
						详情
					</view>
				</view>
			</view>
			
			
			
			<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">
				<view class="cu-item arrow">
					<view class="content" bindtap="CopyLink" data-link="https://github.com/weilanwl/ColorUI">
						<text class="cuIcon-calendar line-red round"></text>
						<text class="text-grey">预约管理</text>
					</view>
				</view>
				<view class="cu-item arrow">
					<navigator class="content" url="/pages/user/info/info" hover-class="none">
						<!-- <image src="/images/logo.png" class="png" mode="aspectFit"></image> -->
						<text class="cuIcon-peoplefill line-green round"></text>
						<text class="text-grey ">身份认证</text>
					</navigator>
				</view>
				<view class="cu-item arrow">
					<navigator class="content" url="/pages/about/log/log" hover-class="none">
						<text class="cuIcon-info text-green round"></text>
						<text class="text-grey">单位用车申请</text>
					</navigator>
				</view>
				<view class="cu-item arrow">
					<view class="content" bindtap="showQrcode">
						<text class="cuIcon-share text-red round"></text>
						<text class="text-grey">推荐给好友</text>
					</view>
				</view>
				<view class="cu-item arrow">
					<button class="cu-btn content" open-type="feedback">
						<text class="cuIcon-activity text-cyan"></text>
						<text class="text-grey">意见反馈</text>
					</button>
				</view>
				
			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
		</view>
</template>

<script>
var _self;
export default {
	data() {
		return {
			user_info:{},
			starCount: 2,
			forksCount: 10,
		};
	},
	onLoad:function(){
		this.getUserInfo();
		
	},
	methods: {
		getUserInfo:function(){
			this.user_info = uni.getStorageSync('user');
		}
	}
};
</script>

<style>
	.UCenter-bg {
  background-image: url(https://cdn.nlark.com/yuque/0/2019/jpeg/280373/1551833865977-assets/web-upload/326b9a70-7630-438b-89e4-f38e8cfafa2e.jpeg);
  background-size: cover;
  height: 550rpx;
  display: flex;
  justify-content: center;
  padding-top: 40rpx;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-weight: 300;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.UCenter-bg text {
  opacity: 0.8;
}

.UCenter-bg image {
  width: 200rpx;
  height: 200rpx;
}

.UCenter-bg .gif-wave{
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 99;
  mix-blend-mode: screen;  
  height: 100rpx;   
}

map,.mapBox{
  left: 0;
  z-index: 99;
  mix-blend-mode: screen;  
  height: 100rpx;   
}

map,.mapBox{
  width: 750rpx;
  height: 300rpx;
}
	
</style>
